<template>
  <view class="indexWraps">
    <view class="card">
      <view class="interpretation">
        <view class="left">
          <text class="border" />
          <text class="name">今日饮食</text>
        </view>
      </view>
      <view class="interpretationContentWrap" @tap="healthInput()">
        <view class="interpretationContent riskList">
          <view class="timeWrap recipe">
            <view class="left">
              <text class="name">今日摄入</text>
              <text class="num">{{ food.totalEnergy }}</text>
              <text class="name">千卡</text>
            </view>
          </view>
          <view class="tags">
            <view v-for="(i, idx) of food.list" :key="idx" class="riskitem">
              {{ i.dietName }}
            </view>
          </view>
          <image class="img-plus" src="https://ainengli.meilianshuke.com/jkhx/common/plus.png" />
          <image
            class="img-monitor"
            src="https://ainengli.meilianshuke.com/jkhx/common/monitor-food.png"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, watch, ref } from 'vue'
import { weight_info_question } from '@/module/api/questionaire'
import { get_questionnaire_status } from '@/module/api/food'
import store from '@/store'
const props = defineProps({
  food: Object,
  empi: String
})
const state = reactive({
  food: {}
})
const questionInfo = ref({})
const dietQuestionList = ref([])
const emit = defineEmits(['openPopup'])
watch(
  () => props.food,
  (newValue, oldValue) => {
    state.food = newValue
  },
  {
    immediate: true,
    deep: true
  }
)
const healthInput = () => {
  const params = {
    empi: props.empi,
  }
  console.log('参数', params)
  get_questionnaire_status(params).then((res: any) => {
    if (res && res.data) {
      uni.navigateTo({
        url: '/module/src/pages/food/dailyFood/index'
      })
    } else {
      weight_info_question({ id: 23 }).then((res) => {
        dietQuestionList.value = JSON.parse(res.data.content)
        questionInfo.value = res.data
        dietQuestionList.value.forEach((item: any) => {
          item.list.forEach((val: any) => {
            val.option = ''
            val.scores = ''
          })
        })
        let param = {
          questionShow: true,
          questionInfo: questionInfo.value,
          dietQuestionList: dietQuestionList.value
        }
        emit('openPopup', param)
      })
    }
  })
}
</script>

<style lang="scss" scoped>
.indexWraps {
  height: auto;
  .card {
    margin: 32rpx 32rpx 0;
    background: #fff;

    &:nth-of-type(1) {
      margin: 32rpx 32rpx 0;
    }

    .interpretation {
      position: relative;
      height: 46rpx;

      .left {
        .border {
          display: inline-block;
          width: 8rpx;
          height: 32rpx;
          vertical-align: middle;
          background: #00d1b6;
          border-radius: 0 4rpx 4rpx 0;
        }

        .name {
          display: inline-block;
          margin-left: 16rpx;
          font-size: 32rpx;
          font-weight: 700;
          color: #222;
          vertical-align: middle;
        }
      }

      .right {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);

        .check-text {
          display: inline-block;
          font-size: 28rpx;
          color: #00d1b6;
          vertical-align: middle;
        }

        .img {
          display: inline-block;
          font-size: 32rpx;
          color: #00d1b6;
          vertical-align: middle;
          width: 32rpx;
          height: 32rpx;
        }

        &.record {
          padding: 4rpx 14rpx 6rpx 20rpx;
          border: 1rpx solid #00d1b6;
          border-radius: 45rpx;

          .check-text {
            font-weight: 700;
            transform: translateY(-2rpx);
          }
        }
      }
    }

    .interpretationContent {
      min-height: 177rpx;
      padding: 24rpx;
      margin-top: 24rpx;
      font-size: 30rpx;
      color: #222;
      background: #fafafa;
      border: 1rpx solid #e5e6eb;
      border-radius: 12rpx;
      position: relative;
      .timeWrap {
        position: relative;
        font-size: 30rpx;
        color: #222;

        .left {
          position: absolute;
          top: 0;
          left: 0;

          .num {
            margin: 0 8rpx;
            font-size: 36rpx;
            font-weight: 700;
            color: #5c8eff;
          }
        }
      }

      .img-plus {
        width: 48rpx;
        height: 48rpx;
        position: absolute;
        top: 28rpx;
        right: 18rpx;
      }

      .img-monitor {
        width: 93rpx;
        height: 92rpx;
        position: absolute;
        right: 18rpx;
        bottom: 0;
      }

      .drug-title {
        position: absolute;
        top: 24rpx;
        left: 24rpx;
        font-size: 30rpx;
        color: #222;
        font-weight: 700;
      }

      &.riskList {
        .tags {
          margin-top: 76rpx;
          height: 48rpx;
          width: 560rpx;
          overflow: hidden;
        }
        .riskitem {
          float: left;
          padding: 0 24rpx;
          height: 48rpx;
          line-height: 48rpx;
          margin-right: 16rpx;
          color: #5c8eff;
          background: rgba(92, 142, 255, 0.1);
          border-radius: 4rpx;
        }

        &.riskListCheck {
          .riskitem {
            color: #5c8eff;
            background: rgb(92 142 255 / 10%);
            border-color: rgb(92 142 255 / 10%);
          }
        }

        &.middle {
          .riskitem {
            color: #ff813c;
            background: rgb(255 129 60 / 10%);
            border-color: rgb(255 129 60 / 10%);
          }
        }

        &.hight {
          .riskitem {
            color: #ff503d;
            background: rgb(255 80 61 / 10%);
            border-color: rgb(255 80 61 / 10%);
          }
        }

        &.low {
          .riskitem {
            color: #5c8eff;
            background: rgb(92 142 255 / 10%);
            border-color: rgb(92 142 255 / 10%);
          }
        }

        &.confirm {
          .riskitem {
            color: #615de9;
            background: rgb(97 93 233 / 10%);
            border-color: rgb(97 93 233 / 10%);
          }
        }

        &.default {
          .riskitem {
            color: #222;
            background: #fff;
            border: 1rpx solid #e5e6eb;
          }
        }

        &.recipeList {
          background: linear-gradient(to bottom, #f1fffd, #fff);
          border: 1rpx solid #8fe6db;

          .breakfast {
            position: relative;
            padding-top: 14rpx;
            font-size: 30rpx;
            font-weight: 700;
            color: #222;

            .right {
              position: absolute;
              top: 50%;
              right: 0;
              transform: translateY(-50%);

              .num {
                margin-right: 8rpx;
                font-size: 36rpx;
                color: #00d1b6;
              }

              .unit {
                font-weight: 400;
              }
            }
          }

          .wraps {
            margin-top: 8rpx;

            .riskitem {
              color: #fff;
              background: #00d1b6;
              border-color: #00d1b6;
            }

            &.nodate {
              height: 100rpx;
              margin-top: 16rpx;
              font-size: 28rpx;
              line-height: 100rpx;
              color: #666;
              text-align: center;
            }
          }
        }
      }
    }

    .restrict {
      height: 428rpx;
      overflow: hidden;
    }

    .informationWrap {
      margin-top: 32rpx;
    }
  }
}
</style>
